$.ajax({
	type:"get",
	url:"../Json/listRight.json",
	async:true,
	success:function(date){
		//console.log(date);
		var html = "";
		date.forEach(function(value){
			html +=`
				<li>
					<div class="yzs666">
						<a href="#">
							<img src="${value.img}" alt="" />
						</a>
					</div>
					<p class="yzs888">
						<a href="#">
							${value.miaoshu}
						</a>
					</p>
					<span id="jiage">
							${value.jiage}
					</span>
				</li>
			`
		})
		//将模板放进去.
		$("#list").append(html);
	}
})

//放大镜.
	//遮罩.
	var mask = $("#mask").get(0);
	//放大镜.
	var fdj = $("#fdj").get(0);
	//大图盒.
	var big_box = $("#big_pic").get(0);
	//大图.
	var img = $("#big_pic img").get(0);
	//console.log(img);
	//移入遮罩层
	mask.onmouseover = function(){
		fdj.style.display = 'block';
		big_box.style.display = "block";
	}
	mask.onmouseout = function(){
		fdj.style.display = 'none';
		big_box.style.display = "none";
	}
	//设置放大镜的距离.
	mask.onmousemove = function(eve){
		var e = eve || window.event;
		
		//console.log(e.pageX - mask.offsetLeft);
		var left = e.pageX - this.offsetLeft - fdj.offsetWidth/2;
		var top = e.pageY - this.offsetTop - fdj.offsetHeight/2 ;
		if(left < 0){
			left = 0
		}else if(left > this.offsetWidth - fdj.offsetWidth){
			left = this.offsetWidth - fdj.offsetWidth;
		}
		if(top < 0){
			top = 0;
		}else if(top > this.offsetHeight - fdj.offsetHeight){
			top = this.offsetHeight - fdj.offsetHeight;
		}
		fdj.style.left = left + "px";
		fdj.style.top = top + "px";
		//计算比例.
		var x = left / (this.offsetWidth - fdj.offsetWidth);
		var y = top / (this.offsetHeight - fdj.offsetHeight);
//		console.log(x,y)
		//console.log(img.offsetWidth - big_box.offsetWidth);
		img.style.left = -(x * (img.offsetWidth - big_box.offsetWidth)) + "px";
		img.style.top = -(y * (img.offsetHeight - big_box.offsetHeight)) + "px";
	}
//切换小图.
$(".fdj_1").click(function(){
	console.log($(this).index());
	$(".pic img").eq(0).attr('src',"../image/xiangqing_img/fdj"+$(this).index()+".jpg");
	console.log($(".pic img").eq(0));
	$("#big_pic img").attr('src',"../image/xiangqing_img/fdj"+$(this).index()+".jpg");
	console.log($(".big_pic img").eq(0));
})
	//移入事件.让放大镜与大盒子同时出来.
//	$("#mask").hover(function(){
//		$("#fdj").css({"display":"block"});
//		$("#big_pic").css({"display":"block"});
//		
//	},function(){
//		$("#fdj").css({"display":"none"});
//		$("#big_pic").css({"display":"none"});
//	})
//	$("#mask").mousemove(function(e){
//		$("#fdj").css({"left":e.pageX - $(this).offset().left,"top":e.pageY - $(this).offset().top});
//	})
	//开局让所有的介绍隐藏.再让第一个显示.
	$(".piche").css({"display":"none"});
	$(".piche").eq(0).css({"display":"block"})
	$(".shiba").css({"display":"none"});
	$(".beijing").hover(function(){
		$(".shiba").css({"display":"block"});
	},function(){
		$(".shiba").css({"display":"none"});
	})
//底部5个li循环加事件.
$(".y1").bind("click",function(){
	var $index = $(this).index();
	$(".y1").css({"background":"#ffffff","color":"black"});
	$(this).css({"background":"#1DAA39","color":"#ffffff"});
	$(".piche").css({"display":"none"});
	$(".piche").eq($index).css({"display":"block"});
})
//单袋、整箱点击事件.
$(".dan").click(function(){
	$(".dan").css({"border":"1px solid #999999"});
	$(this).css({"border":"1px solid green"});
	$(".jiage").html("34.00")
})
//整箱点击事件.
$(".shuang").click(function(){
	$(".jiage").html("408.00")
})
//点击事件.
$(".dizhi").click(function(){
	$(this).css({"border":"1px solid green"})
})
//减法事件.
var num = 1;
$("#jian").click(function(){
	num --;
	if(num == 0){
		num = 1;
	}
	$("#ji").html(num);
})
//加法事件.
$("#jia").click(function(){
	num ++;	
	$("#ji").html(num);
})

//字符串转换对象.
			function convertCartStrToObj(cartStr){
				if(!cartStr){
					return {};
				}
				var goods = cartStr.split(":");
				var obj = {};
				for(var i = 0; i < goods.length; i ++){
					var data = goods[i].split(",");
					//以商品的id为健，商品的其他信息为值，这个值也设计为一个对象
					obj[data[0]] = {
						name : data[1],
						price : parseFloat(data[2]),
						num : parseInt(data[3]),
						src : data[4]
					}
				}
				return obj;
			}
		//字符串转换成对象.
		function convertObjToCartStr(obj){
					var cartStr = "";
					//遍历对象
					for(var id in obj){
						if(cartStr){
							cartStr += ":";
						}
						cartStr += id + "," + obj[id].name + "," + obj[id].price + "," + obj[id].num + "," + obj[id].src;
					}
					return cartStr;
			}

//加载购物车中的信息（使商品页与购物车页中的购物车数量同步）
			function loadCart(){
				var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
					var cartObj = convertCartStrToObj(cartStr);
					//获取到购物车中所有商品的数量
					var total = 0;
					for(var id in cartObj){
						total = cartObj[id].num;
					}
					$("#car_id").html(total);
				}

//点击事件.
$("#but2").click(function(){
	
	//获取商品的ID值.
	var id = $(".zhuti").attr("id");
	console.log(id);
	//获取商品的名称.
	var name = $(".zhuti").html();
	console.log(name);
	//获取商品的价格.
	var price = $(".jiage").html();
	console.log(price);
	//获取商品图片的src.
	var src = $(".pic").children().eq(0).attr("src");
	console.log(src);
	
//查看cookie中是否有购物车cookie.
	var carStr = $.cookie("cart") ? $.cookie("cart") : "";
	//console.log(carStr);
	//将字符串转成对象.
	var cartObj = convertCartStrToObj(carStr);
	//看看商品在购物车cookie中是不是已经存在了.
	if(id in cartObj){
		cartObj[id].num = $("#ji").html();
		console.log(cartObj[id].num);
	}else{
		//如果不存在,将商品信息存进去.
		cartObj[id] = {
			name : name,
			price : price,
			num : 1,
			src : src
		};
	}
	
	//再将物品信息的对象转换成字符串.
	carStr = convertObjToCartStr(cartObj);
	//存入 cookie.
	$.cookie("cart",carStr,{expires : 7, path:'/'});
	//window.location.href = "shoppingCart.html";
	loadCart();
});

//立即购买.
$("#but1").click(function(){
	window.location.href = "shoppingCart.html";
})
